<template>
<div class="header">
  <div class="header-left">
      <div class="iconfont zjt-icon">&#xe667;</div>
  </div>
  <div class="header-input">
      <span class="iconfont">&#xe610;</span>
      输入城市/景点/游玩主题</div>
      <router-link to="/city">
  <div class="header-right">
      {{this.city}}
      <span class="iconfont xjt-icon">&#xe64a;</span>
  </div>
      </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
   .header
        display:flex
        line-height: $headerHeight
        background:$bgColor
        color: #fff
      .header-left
        width: .64rem
        float:left
        .zjt-icon
          text-align:center
          font-size:.4rem
      .header-input
        flex:1
        height:0.64rem
        line-height:0.64rem
        background:#fff
        margin-top:.12rem
        margin-left:.2rem
        padding-left:.2rem
        border-radius:.1rem
        color :#ccc
      .header-right
        min-width: 1.04rem
        padding :0 .1rem
        float:right
        text-align:center
        color :#fff
        .xjt-icon
          font-size .24rem
          margin-left:-.04rem
</style>
